<template>
  <view class="page">
    <view class="panel">
      <text class="title">订单信息</text>
      <view class="row"><text class="label">订单号</text><text class="val">{{ info.orderNo }}</text></view>
      <view class="row"><text class="label">服务日期</text><text class="val">{{ info.serviceDate }}</text></view>
      <view class="row"><text class="label">时间段</text><text class="val">{{ info.startTime }} - {{ info.endTime }}</text></view>
      <view class="row"><text class="label">金额</text><text class="val price">¥{{ Number(info.amount||0).toFixed(2) }}</text></view>
      <view class="row"><text class="label">状态</text><text class="val">{{ mapStatus(info.orderStatus) }}</text></view>
      <view class="row"><text class="label">紧急联系人</text><text class="val">{{ info.emergencyContact }} {{ info.emergencyPhone }}</text></view>
      <view class="row"><text class="label">备注</text><text class="val">{{ info.remark || '—' }}</text></view>
    </view>
    
    <!-- 服务进行中或已完成时显示查看服务记录按钮 -->
    <view class="action-btns" v-if="info.orderStatus === 'IN_PROGRESS' || info.orderStatus === 'COMPLETED'">
      <button class="view-records-btn" @click="viewServiceRecords">
        <text class="btn-icon">📸</text>
        查看服务记录
      </button>
    </view>

    <!-- 订单完成后显示评价入口；已评价则显示已评价不可点 -->
    <view class="action-btns" v-if="info.orderStatus === 'COMPLETED'">
      <button v-if="!hasFeedback" class="rate-btn" @click="goRate">去评价</button>
      <button v-else class="rate-btn done" disabled>已评价</button>
    </view>
    
    <custom-tabbar :active="3" />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import { getOrder } from '@/api/order'
import { getFeedbackByOrder } from '@/api/feedback'
export default {
  components: { CustomTabbar },
  data(){ return { id:'', info:{}, hasFeedback:false } },
  onLoad(q){ this.id = q && q.id; this.fetch() },
  methods:{
    async fetch(){
      if (!this.id) return
      const res = await getOrder(this.id)
      this.info = res.data || res
      if (this.info && this.info.id) {
        const f = await getFeedbackByOrder(this.info.id)
        this.hasFeedback = !!(f && f.data && f.data.id)
      }
    },
    mapStatus(s){
      const map = { PENDING:'待接单', CONFIRMED:'已确认', IN_PROGRESS:'进行中', COMPLETED:'已完成', CANCELLED:'已取消' }
      return map[s] || s
    },
    viewServiceRecords(){
      uni.navigateTo({
        url: `/pages/order/service-records?orderId=${this.id}`
      })
    },
    goRate(){
      uni.navigateTo({ url: `/pages/order/rate?orderId=${this.id}` })
    }
  },
  onShow(){
    // 页面显示时刷新数据
    if (this.id) {
      this.fetch()
    }
  }
}
</script>

<style scoped>
.page { padding: 16rpx; background:#f7fafc; min-height: 100vh; }
.panel { background:#fff; border-radius: 16rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.06); padding: 16rpx; margin-bottom: 20rpx; }
.title { font-size: 32rpx; font-weight: 700; margin-bottom: 12rpx; }
.row { display:flex; align-items:center; justify-content: space-between; padding: 8rpx 0; }
.label { color:#6b7280; }
.val { color:#111827; }
.price { color:#0ea5a5; font-weight: 700; }

.action-btns { padding: 0 16rpx 20rpx; }
.view-records-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon { margin-right: 10rpx; font-size: 36rpx; }
</style>


